<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Image</title>
</head>
<body>
<form action="/api/upload" method="post" enctype="multipart/form-data">
  <h1>上传图片</h1>
    <input type="file" id="fileName" name="file"><br>
  <img src="" width="60" id="imgShow" style="border-radius: 50%"><br>
  <input type="submit" value="提交">
</form>


<script>
    $("#fileName").change(function (){
        console.log("aaaa==========");
        var img = document.getElementById("imgShow"); // 通过DOM获得对象
        var filePath = this.files[0];
        // 通过filereader读取文件
        var reader = new FileReader(filePath);
        reader.readAsDataURL(filePath);
        reader.onload = function (ev){
            img.src = reader.result; // 这里不识别jquery，只能使用原生的js
        }
    });
</script>
</body>
</html>